<template>
    <div class="realTime">
        <div class="boxTitle">
            <img src="@/assets/images/home/rulu.png" alt="">
            <span class="title">实时监测</span>
        </div>
        <div class="l_top">
            <div class="l_top_1">
                <div class="l_top_num">6.2</div>
                <div class="l_top_img"></div>
                <span>主蒸汽压力(MPa)</span>
            </div>
            <div class="l_top_1">
                <div class="l_top_num">420.1</div>
                <div class="l_top_img"></div>
                <span>主蒸汽温度(℃)</span>
            </div>
            <div class="l_top_1">
                <div class="l_top_num">110.3</div>
                <div class="l_top_img"></div>
                <span>主蒸汽流量(t/h)</span>
            </div>
        </div>
        <div class="l_top">
            <div class="l_top_1">
                <div class="l_top_num">27.8</div>
                <div class="l_top_img"></div>
                <span>功率(MW)</span>
            </div>
            <div class="l_top_1">
                <div class="l_top_num">2998.9</div>
                <div class="l_top_img"></div>
                <span>汽机转速(r/min)</span>
            </div>
            <div class="l_top_1">
                <div class="l_top_num">-94.9</div>
                <div class="l_top_img"></div>
                <span>真空(kPa)</span>
            </div>
        </div>
        <div class="parameters">
            <div class="line"></div>
            重要参数
        </div>
        <div class="table">
            <el-table :data="tableData.list" height="34.5vh" style="width :100%;" stripe :scrollbar-always-on="true">
                <el-table-column prop="name" label="设备名" class-name="column_date" align="center" />
                <el-table-column prop="param" label="参数名" class-name="column_common" align="center" />
                <el-table-column prop="value" label="当前值" align="center" />
                <el-table-column prop="range" label="正常范围" align="center" />
            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts">

let tableData = reactive({
    list: [
        { name: "I轴", param: "汽缸壁温-上缸", value: '357.98℃', range: "330-380"},
        { name: "II轴", param: "汽缸壁温-上缸", value: '357.98℃', range: "330-380"},
        { name: "III轴", param: "汽缸壁温-下缸", value: '357.98℃', range: "330-380"},
        { name: "SO2", param: "汽缸壁温-下缸", value: '357.98℃', range: "330-380"},
        { name: "HCL", param: "汽缸壁温-下缸", value: '357.98℃', range: "330-380"},
        { name: "SO2", param: "汽缸壁温-下缸", value: '357.98℃', range: "330-380"},
        { name: "HCL", param: "汽缸壁温-下缸", value: '357.98℃', range: "330-380"},
        { name: "SO2", param: "汽缸壁温-下缸", value: '357.98℃', range: "330-380"},
        { name: "SO2", param: "汽缸壁温-下缸", value: '357.98℃', range: "330-380"},
        { name: "SO2", param: "汽缸壁温-下缸", value: '357.98℃', range: "330-380"},
        { name: "HCL", param: "汽缸壁温-下缸", value: '357.98℃', range: "330-380"},
        { name: "SO2", param: "汽缸壁温-下缸", value: '357.98℃', range: "330-380"},
        { name: "HCL", param: "汽缸壁温-下缸", value: '357.98℃', range: "330-380"},
        { name: "SO2", param: "汽缸壁温-下缸", value: '357.98℃', range: "330-380"},
        { name: "SO2", param: "汽缸壁温-下缸", value: '357.98℃', range: "330-380"},
    ]
})
</script>

<style lang="scss" scoped>
.realTime {
    position: absolute;
    background: url(@/assets/images/engineSystem/right1.png) no-repeat;
    background-size: 100% 100%;
    top: vh(61);
    right: vh(21);
    width: vh(421);
    height: vh(647);
    z-index: 999;
    // padding-left: vh(27);
    // padding-right: vh(26);

    .l_top {
        display: flex;
        margin-top: vh(20);
        padding-left: vh(27);
        padding-right: vh(26);
        justify-content: space-between;

        .l_top_1 {
            display: flex;
            flex-direction: column;
            align-items: center;

            .l_top_num {
                line-height: vh(15);
                font-size: vh(20);
                font-family: DIN;
                font-weight: bold;
                color: #00E3FF;
            }

            .l_top_img {
                text-align: center;
                width: vh(88);
                height: vh(22);
                background: url(@/assets/images/home/zu1.png) no-repeat;
                background-size: 100% 100%;
                margin-bottom: vh(11);
            }

            span {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: vh(12);
                color: #FFFFFF;
            }
        }
    }

    .parameters {
        display: flex;
        align-items: center;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: vh(14);
        color: #FFFFFF;
        margin-top: vh(18);
        margin-bottom: vh(10);
        padding-left: vh(18);

        .line {
            width: vh(3);
            height: vh(14);

            background: #00E3FF;
            border-radius: vh(2);
            margin-right: vh(6);
        }
    }
    .table {
        padding-left: vh(14);
        padding-right: vh(12);
        margin-bottom: vh(23);
        :deep(.el-table__inner-wrapper::before) {
            background-color: transparent,
        }
    }
}
</style>
